<template>
  <div class="department-container">
    <div class="content">
      <h1 class="title">部门管理</h1>
      <div class="header">
        <el-button type="primary" @click="openAddDialog()">新增根部门</el-button>
      </div>
      <el-collapse v-model="activeNames" accordion>
        <DepartmentItem
            v-for="dept in departmentList"
            :key="dept.deptId"
            :department="dept"
            @add="openAddDialog"
            @delete="handleDelete"
        />
      </el-collapse>
    </div>

    <!-- 添加部门弹窗 -->
    <el-dialog title="新增部门" v-model="dialogVisible" width="400px" class="dialog">
      <el-form :model="formData" label-width="100px" label-position="top">
        <el-form-item
            label="部门名称"
            :rules="{ required: true, message: '请输入部门名称', trigger: 'blur' }"
        >
          <el-input v-model="formData.deptName" />
        </el-form-item>
        <el-form-item label="部门描述">
          <el-input v-model="formData.deptDesc" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitForm">确认</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { getDepartmentList, addDepartment, deleteDepartment } from "@/api/department";
import DepartmentItem from "./DepartmentItem.vue"; // Ensure the correct path

const departmentList = ref([]);

const dialogVisible = ref(false);
const activeNames = ref([]); // Controls which Collapse panels are expanded

const formData = reactive({
  deptName: "",
  deptDesc: "",
  parentDeptId: null,
});

// Fetch department list
const getDepartment = async () => {
  try {
    const res = await getDepartmentList();
    if (res.data.code === 200) {
      departmentList.value = res.data.data;
    } else {
      ElMessage.error(res.data.msg);
    }
  } catch (error) {
    ElMessage.error("获取部门数据失败！");
  }
};

// Open add department dialog
const openAddDialog = (parentDeptId = 0) => {
  dialogVisible.value = true;
  formData.deptName = "";
  formData.deptDesc = "";
  formData.parentDeptId = parentDeptId;
};

// Submit add department form
const submitForm = async () => {
  if (!formData.deptName.trim()) {
    ElMessage.error("部门名称不能为空！");
    return;
  }
  try {
    const res = await addDepartment(formData);
    if (res.data.code === 200) {
      ElMessage.success("新增部门成功！");
      dialogVisible.value = false;
      getDepartment();
    } else {
      ElMessage.error(res.data.msg);
    }
  } catch (error) {
    ElMessage.error("新增部门失败！");
  }
};

// Handle delete department
const handleDelete = async (deptId) => {
  try {
    await ElMessageBox.confirm('确定删除该部门吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    });
    const res = await deleteDepartment(deptId);
    if (res.data.code === 200) {
      ElMessage.success("部门删除成功！");
      getDepartment();
    } else {
      ElMessage.error(res.data.msg);
    }
  } catch (error) {
    if (error !== 'cancel') { // If not canceled
      ElMessage.error("删除部门失败！");
    }
  }
};

// Initialize by fetching department list
onMounted(() => {
  getDepartment();
});
</script>

<style scoped>
/* Base styles */
.department-container {
  display: flex;
  justify-content: center;
  padding: 20px;
  background-color: #f5f5f5; /* Light gray background for the container */
  width: 800px;

  margin-left: 30%;
}

.content {
  padding: 20px;
  border-radius: 8px;
  background-color: #ffffff; /* White background for content */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow */
  width: 800px;
}

.title {
  text-align: center;
  color: #333333; /* Darker text for better readability */
  font-family: Arial, sans-serif; /* Simple and clean font */
  font-size: 2rem;
  margin-bottom: 20px;
}

.header {
  text-align: right;
  margin-bottom: 20px;
}

/* Dialog styles */
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}

.el-button {
  margin: 0 5px;
  font-family: Arial, sans-serif;
}

.el-button--primary {
  background-color: #409EFF; /* Standard primary color */
  border-color: #409EFF;
  color: #fff;
}

.el-button--primary:hover {
  background-color: #66b1ff; /* Slightly lighter on hover */
  border-color: #66b1ff;
}

.el-button--danger {
  background-color: #f56c6c; /* Standard danger color */
  border-color: #f56c6c;
  color: #fff;
}

.el-button--danger:hover {
  background-color: #ff7b7b; /* Slightly lighter on hover */
  border-color: #ff7b7b;
}

.el-dialog {
  font-family: Arial, sans-serif;
  background: #ffffff; /* White background for dialog */
  color: #333333; /* Dark text */
  border: 1px solid #dcdcdc; /* Light border */
}

.el-dialog__header {
  background-color: #f0f0f0; /* Light gray header background */
  color: #333333; /* Dark text */
  border-bottom: 1px solid #dcdcdc;
}

.el-dialog__body {
  background-color: #ffffff; /* White content background */
}

.el-dialog__footer {
  background-color: #f0f0f0; /* Light gray footer background */
}

.el-form-item__label {
  color: #333333; /* Dark label text */
}

.el-input__inner {
  background-color: #fafafa; /* Very light gray input background */
  color: #333333; /* Dark input text */
  border: 1px solid #dcdcdc; /* Light border */
}

.el-collapse-item__header {
  background-color: #f7f7f7; /* Light gray header background */
  color: #333333; /* Dark text */
  font-family: Arial, sans-serif;
  font-weight: 600;
}

.el-collapse-item__content {
  background-color: #ffffff; /* White content background */
  color: #333333; /* Dark text */
  border-top: 1px solid #dcdcdc;
}

.el-collapse-item {
  margin-bottom: 10px;
  border: 1px solid #dcdcdc; /* Light border */
  border-radius: 4px;
  overflow: hidden;
}
</style>
